<template>
  <el-skeleton class="recommend" :loading="false" animated :throttle="500">
    <template #default>
      <div class="top-songlist" :style="{backgroundImage:'url('+ topPlaylistImg +')'}">
        <div class="image bigger" @click="handleTopSongList">
          <img :src="topPlaylistImg">
        </div>
        <div class="text">
          <div class="tags"><el-tag type="success">全部</el-tag></div>
          <div class="name">{{topPlaylistName}}</div>
          <div class="description oh4">{{topPlaylistDes}}</div>
        </div>
      </div>
      <div class="nav">
        <el-popover class="tags" placement="bottom-end" title="全部歌单" :width="700" trigger="click">
          <template #reference>
            <el-button class="but">
              <span>{{ curTag }}</span>
              <el-icon>
                <ArrowRight />
              </el-icon>
            </el-button>
          </template>
          <el-divider />
          <div class="cat">
            <div class="language item">
              <div class="logo">
                <div class="iconfont icon-diqiu"></div>
                <div class="ml10">语种</div>
              </div>
              <div class="text">
                <div v-for="(item, index) in language" :key="index" @click="handleCat(item.name)">{{ item.name }}</div>
              </div>
            </div>
            <div class="style item">
              <div class="logo">
                <div class="iconfont icon-fengge"></div>
                <div class="ml10">风格</div>
              </div>
              <div class="text">
                <div v-for="(item, index) in style" :key="index" @click="handleCat(item.name)">{{ item.name }}</div>
              </div>
            </div>
            <div class="scenes item">
              <div class="logo">
                <div class="iconfont icon-kafeiting"></div>
                <div class="ml10">场景</div>
              </div>
              <div class="text">
                <div v-for="(item, index) in scenes" :key="index" @click="handleCat(item.name)">{{ item.name }}</div>
              </div>
            </div>
            <div class="emotion item">
              <div class="logo">
                <div class="iconfont icon-xiaolian"></div>
                <div class="ml10">情感</div>
              </div>
              <div class="text">
                <div v-for="(item, index) in emotion" :key="index" @click="handleCat(item.name)">{{ item.name }}</div>
              </div>
            </div>
            <div class="theme item">
              <div class="logo">
                <div class="iconfont icon-jingzi"></div>
                <div class="ml10">主题</div>
              </div>
              <div class="text">
                <div v-for="(item, index) in theme" :key="index" @click="handleCat(item.name)">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </el-popover>
        <div class="hot-tags">
          <div class="hot" v-for="(item, index) in hotTags" :key="index" @click="handleCat(item.name)">{{ item.name }}</div>
        </div>
      </div>
      <div class="songlist">
        <el-card :body-style="{ padding: '0px' }" class="item" v-for="(item, index) in playlists" ::key="index">
          <div class="image" @click="handleSongList(item)">
            <img class="bigger" :src="item.coverImgUrl"/>
            <span class="play-count">
              <span class="iconfont icon-player-play icon mr5"></span>
              <span>{{playCount(item.playCount)}}</span>
            </span>
            <div class="player">
              <span class="iconfont icon-Playerplay icon"></span>
            </div>
          </div>
          <div class="m5 f14">
            <el-popover placement="top-start" :width="270" trigger="click" :hide-after="100" :content="item.name">
              <template #reference>
                <span class="oh">{{ item.name }}</span>
              </template>
            </el-popover>
          </div>
        </el-card>
      </div>
      <Pagination :currentChange="currentChange"/>
    </template>
    <template #template>
      <div class="s-swiper">
        <el-skeleton-item variant="p" />
        <el-skeleton-item variant="p" />
        <el-skeleton-item variant="p" />
      </div>
    </template>
  </el-skeleton>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted ,computed} from 'vue'
import Pagination from '@/components/Pagination.vue'
import {useMusicStore} from '@/store/music.js'
import {useRouter} from 'vue-router'
const musicStore=useMusicStore()
const router=useRouter()
const { proxy } = getCurrentInstance()
let loading = ref(true)
let hotTags = ref([])
let tags = ref([])
let curTag = ref('华语')
// 精品歌单列表
let topPlaylists = ref([])
// 歌单列表
let playlists = ref([])
// 热门歌单标签
let getHotPlaylistTags = async () => {
  let res = await proxy.$api.getHotPlaylistTags()
  if(res.tags){
    hotTags.value = res.tags
  }
}
// 歌单标签（包括热门）
let getTopPlaylistTags = async () => {
  let res = await proxy.$api.getTopPlaylistTags()
  if(res.tags){
    tags.value = res.tags
  }
}
// 歌单标签分类
let language = ref([])
let style = ref([])
let scenes = ref([])
let emotion = ref([])
let theme = ref([])
let tagsCat = () => {
  language.value = tags.value.filter((item) => item.category == 0)
  style.value = tags.value.filter((item) => item.category == 1)
  scenes.value = tags.value.filter((item) => item.category == 2)
  emotion.value = tags.value.filter((item) => item.category == 3)
  theme.value = tags.value.filter((item) => item.category == 4)
}
// 获取精品歌单列表
let getTopPlaylist = async (cat) => {
  let params={}
  if(cat) params.cat=cat
  let res = await proxy.$api.getTopPlaylist(params)
  if(res.playlists){
    topPlaylists.value = res.playlists
  }
}
// 获取歌单列表
let getPlaylist = async (cat,offset) => {
  let params={}
  if(cat) params.cat=cat
  if(offset) params.offset=offset
  let res = await proxy.$api.getPlaylist(params)
  if(res.playlists){
    playlists.value = res.playlists
  }
}

// 根据分类参数获取不同歌单列表
let handleCat = async (val) => {
  curTag.value = val
  await getTopPlaylist(val)
  await getPlaylist(val)
}
let playCount=(val)=>{
  if(val<10000){
    return val
  }else if(val>9999&&val<100000000){
    return Math.floor(val/10000)+"万"
  }else{
    return Math.floor(val/100000000)+"亿"
  }
}
// 跳转到歌单视图
let handleSongList=async(item)=>{
  let {playlist}=await proxy.$api.getSongListDetail2({id:item.id})
  musicStore.saveCurSongList(playlist)
  router.push({path:'songList'})
}
let currentChange=async(val)=>{
  await getPlaylist(curTag.value,(val-1)*50)
}
onMounted(async () => {
  await getHotPlaylistTags()
  await getTopPlaylistTags()
  await getTopPlaylist()
  await getPlaylist()
  tagsCat()
  loading.value = false
})
let topPlaylistImg=computed(()=>{
  if(topPlaylists.value.length>0){
    return topPlaylists.value[0].coverImgUrl
  }
})
let topPlaylistName=computed(()=>{
  if(topPlaylists.value.length>0){
    return topPlaylists.value[0].name
  }
  
})
let topPlaylistDes=computed(()=>{
  if(topPlaylists.value.length>0){
    return topPlaylists.value[0].description
  }
})
</script>

<style lang="scss">
.recommend {
  height: 100%;
  width: 100%;
}
.top-songlist{
  background-repeat: no-repeat;
  background-size: 100%;
  margin-top: 10px;
  width: 100%;
  height: 160px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  .image{
    margin-left: 10px;
    width: 140px;
    height: 140px;
    img{
      width: 140px;
      height: 140px;
    }
  }
  .text{
    margin-left: 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    .tags{
      margin-top: -10px;
    }
    .name{
      margin-top: 10px;
      font-size: 14px;
      line-height: 30px;
      height: 30px;
    }
    .description{
      font-size: 12px;
    }
  }
}
.nav{
  margin-top: 15px;
  height: 30px;
  display: flex;
  .tags{
    height: 30px;
  }
  .hot-tags{
    height: 30px;
    display: flex;
    .hot{
      line-height: 30px;
      margin-left: 20px;
      font-size: 14px;
    }
    .hot:hover{
      color:#02b402;
    }
  }
}
.cat {
  padding: 0 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  .item {
    display: flex;
    .logo {
      display: flex;
      width: 100px;
    }
    .text {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      div {
        align-items: center;
        text-align: center;
        width: 90px;
        height: 55px;
      }
      div:hover {
        color: #02b402;
      }
    }
  }
}
.songlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  .item {
    margin-top: 10px;
    width: 19%;
    .image {
      position: relative;
      height: 0;
      padding-top: 100%;
      width: 100%;
      img {
        top: 0;
        left: 0;
        position: absolute;
        width: 0;
        overflow: hidden;
      }
      // 图片放大和缩小
      .bigger {
        width: 100%;
        height: 100%;
        transition: transform 1s;
      }

      .bigger:hover {
        transform: scale(1.045, 1.045);
      }
      .play-count {
        display: flex;
        align-items: center;
        color: #dbdde1;
        font-size: 14px;
        position: absolute;
        top: 10px;
        right: 10px;
      }
      // 播放
      .player {
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        border-radius: 50px;
        bottom: 25px;
        right: 25px;
        width: 50px;
        height: 50px;
        background-color: #e3e0d8;
      }
      &:hover .player {
        opacity: 0.7;
        transition-duration: 1.5s;
      }
      .player span {
        font-size: 25px;
        color: #18a058;
      }
    }
  }
}
.but {
  height: 30px;
  border-radius: 15px;
}
</style>
